<template>
    <div class="mapBox">
        <div class="map" ref="map"></div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import *as echarts from 'echarts' 

import China from'./china.json'
//注册地图配置项
echarts.registerMap('china',(China as any))
let map=ref()

onMounted(()=>{
    let echart=echarts.init(map.value)
    echart.setOption({
        geo:{
            map:'china',
            show:true,
            zoom:1.2,
            label:{
                show:true,
                color:'white',
                offset:[20,10],
                
            },
            itemStyle:{
                areaColor:'#0000FF',
                borderColor :'#rgba(0,0,0,0.0)',
                shadowColor: 'rgba(93, 93, 93, 0.8)',
                shadowBlur: 5,
                shadowOffsetY:5,
                opacity :0.8
            },
            emphasis:{
                itemStyle:{
                    areaColor:'white'
                }
            },
            top:120,
            left:150,
            right:150,
            
        },
        series:[
            {
                type: 'lines',
                data:[
                    // 第一条航线
                    {
                        coords: [
                            [116.405285,39.904989],  // 起点
                            [121.472644,31.231706]   // 终点
                        ],
                        lineStyle: {
                            curveness: 0.2,
                            color:'#93b7b7',
                            width:1,
                            cap : 'round',
                            join : 'round'
                        
                        },

                        
                    },
                    //第二条航线
                    {
                        coords: [
                            [119.306239,26.075302],  // 起点
                            [110.33119,20.031971]   // 终点
                        ],
                        lineStyle: {
                            curveness: -0.2,
                            color:'#93b7b7',
                            width:1,
                            cap : 'round',
                            join : 'round'
                        
                        },

                        
                    },
                    //第三条航线
                    {
                        coords: [
                            [87.617733,43.792818],  // 起点
                            [104.065735,30.659462]   // 终点
                        ],
                        lineStyle: {
                            curveness: 0.2,
                            color:'#93b7b7',
                            width:1,
                            cap : 'round',
                            join : 'round'
                        
                        },

                        
                    },
                    //第四条航线
                    {
                        coords: [
                            [102.712251,25.040609],  // 起点
                            [114.298572,30.584355]   // 终点
                        ],
                        lineStyle: {
                            curveness: -0.2,
                            color:'#93b7b7',
                            width:1,
                            cap : 'round',
                            join : 'round'
                        
                        },

                        
                    },
                    //第五条航线
                    {
                        coords: [
                            [126.642464,45.756967],  // 起点
                            [91.132212,29.660361]   // 终点
                        ],
                        lineStyle: {
                            curveness: -0.2,
                            color:'#93b7b7',
                            width:1,
                            cap : 'round',
                            
                        
                        },

                        
                    },
                ],
                effect:{
                    show:true,
                    symbol :'image://https://s1.chu0.com/prevfiles/11bc185bd45d4f578928e54b5a9cadf7.png?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:2Ajn2xzhDIcaNuITui-p4goKQGE=',
                    color:'yellow',
                    symbolSize  : [40, 50],
                    period: 12
                }  

                
            }
        ]
    })

})
</script>

<style scoped lang='scss'>
    .mapBox{
        flex: 3;
        
        .map{
            height: 100%;
            
        }
    }
</style>